<template>
  <div v-if="event">
    <el-form-item label="eventName">
      <el-select v-model="event.eventName" multiple placeholder="请选择">
        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name"></el-option>
      </el-select>
    </el-form-item>
    <template v-for="(item,key) in event">
      <el-form-item :label="key" :key="key" v-if="key!=='eventName'">
        <el-button type="primary" @click="$refs[key+'Editor'][0].open(item.code)">编写代码</el-button>
        <CodeDialog
          :ref="key+'Editor'"
          :name="item.name"
          :params="item.params"
          mode="text/javascript"
          v-model="item.code"
          :placeholder="item.placeholder"
        />
      </el-form-item>
    </template>
  </div>
</template>

<script>
import CodeDialog from "@/components/editor/CodeDialog";

export default {
  name: "EventConfig",
  components: {
    CodeDialog,
  },
  props: {
    value: {
      type: Object,
      default: () => {},
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    event: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>